<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link href="https://gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.80.0" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>js奇淫技巧2 &middot; K J</title>
  <meta name="description" content="" />

  
  <link type="text/css" rel="stylesheet" href="http://kartjim.gitee.io/hugo/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="http://kartjim.gitee.io/hugo/css/poole.css">
  <link type="text/css" rel="stylesheet" href="http://kartjim.gitee.io/hugo/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="http://kartjim.gitee.io/hugo/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="icon" href="/hugo/favicon.png">
  
  
</head>

  <body class="theme-base-09 ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="http://kartjim.gitee.io/hugo/"><h1>K J</h1></a>
      <p class="lead">
       kart jim`blog 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="http://kartjim.gitee.io/hugo/">Home</a> </li>
        <li><a href="https://blog.csdn.net/qq_46590483?spm=1001.2100.3001.5343"> CSDN </a></li><li><a href="https://github.com/can-dy-jack"> Github </a></li><li><a href="https://www.cnblogs.com/kartjim"> 博客园 </a></li>
      </ul>
    </nav>

    <p>Copyright 2021 © kart jim</p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>js奇淫技巧2</h1>
  <time datetime=2021-01-03T10:38:21Z class="post-date">Sun, Jan 3, 2021</time>
  <h2 id="dom">DOM</h2>
<pre><code class="language-mermaid" data-lang="mermaid">graph LR
A[window] --&gt; B[document]
A --&gt; C[location]
A --&gt; D[history]
A --&gt; E[navigator]
A --&gt; F[... ...]
</code></pre><p>层级数最顶端的是浏览器window对象，它是页面的DOM表示中一切对象的父对象。
window对象有一些子对象：</p>
<h3 id="document对象">document对象</h3>
<p>任何HTML页面都会创建一个document对象，包含全部HTML内容和其它构成页面的资源。</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript">document.<span style="color:#a6e22e">write</span>()
</code></pre></div><h2 id="与用户交互">与用户交互</h2>
<p>用  .  调用子对象</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript">document.<span style="color:#a6e22e">body</span>
window.<span style="color:#a6e22e">alert</span>
...
</code></pre></div><h3 id="window对象下的常用方法">window对象下的常用方法</h3>
<p><em>调用window对象下的方法可省略 window ；
即 将 <code>window.alert();</code> 简写为 <code>alert();</code></em></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#a6e22e">alert</span>();
<span style="color:#a6e22e">confirm</span>(); <span style="color:#75715e">//有选择的两个按钮
</span><span style="color:#75715e"></span><span style="color:#a6e22e">prompt</span>(); <span style="color:#75715e">//允许输入信息，并作为返回值
</span></code></pre></div><h3 id="document对象下的常用方法">document对象下的常用方法</h3>
<h4 id="获取标签节点">获取标签节点</h4>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#ae81ff">1.</span> <span style="color:#a6e22e">getElementById</span>(<span style="color:#a6e22e">id</span>)
<span style="color:#ae81ff">2.</span> <span style="color:#a6e22e">getElementsByName</span>(<span style="color:#a6e22e">name</span>) 
<span style="color:#ae81ff">3.</span> <span style="color:#a6e22e">getElementsByTagName</span>(<span style="color:#a6e22e">tagname</span>) 
</code></pre></div><h4 id="innerhtml">innerHTML</h4>
<p>可通过节点的 innerHTML 属性来访问文本节点的值，可以向HTML里写入文字。
HTML：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html">&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;textbox&#34;</span>&gt;
    &lt;<span style="color:#f92672">p</span>&gt;your txt&lt;/<span style="color:#f92672">p</span>&gt;
&lt;/<span style="color:#f92672">div</span>&gt;
</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">myDom</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;textbox&#34;</span>).<span style="color:#a6e22e">innerHTML</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;&lt;p&gt;更改后的内容&lt;/p&gt;&#34;</span>
</code></pre></div><h3 id="history对象下的常用方法">history对象下的常用方法</h3>
<p>history对象只有一个属性，就是它的长度，代表用户访问过的页面的数量。</p>
<blockquote>
<p>history.length</p>
</blockquote>
<p>history对象有三个方法：forward()、backward()、go()。</p>
<ul>
<li>forward()、backward()对应单页浏览器中前进和后退。</li>
<li>go()跳转到历史记录里的相对位置，正数是前进，负数是后退。</li>
</ul>
<h3 id="location对象下的常用方法">location对象下的常用方法</h3>
<p>location对象包含当前加载页面的URL信息。
比如：http://www.baidu.com
一般组成部分：</p>
<blockquote>
<p>[协议]//[主机名]:[端口]/[路径][搜索][hash]</p>
</blockquote>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">href</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;http://www.baidu.com&#39;</span>; <span style="color:#75715e">//直接设置对象的herf属性
</span><span style="color:#75715e"></span><span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">replace</span>(<span style="color:#e6db74">&#39;http://www.baidu.com&#39;</span>);<span style="color:#75715e">// 替换旧的URL
</span><span style="color:#75715e"></span><span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">reload</span> ();  <span style="color:#75715e">//刷新页面
</span></code></pre></div><h3 id="navigator对象下的常用方法">navigator对象下的常用方法</h3>
<p>navigator对象包含了浏览器 程序本身的数据。
如：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html"><span style="color:#75715e">&lt;!DOCTYPE html&gt;</span>
&lt;<span style="color:#f92672">html</span> <span style="color:#a6e22e">lang</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;en&#34;</span>&gt;
&lt;<span style="color:#f92672">head</span>&gt;
    &lt;<span style="color:#f92672">meta</span> <span style="color:#a6e22e">charset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;UTF-8&#34;</span>&gt;
    &lt;<span style="color:#f92672">meta</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;viewport&#34;</span> <span style="color:#a6e22e">content</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;width=device-width, initial-scale=1.0&#34;</span>&gt;
    &lt;<span style="color:#f92672">title</span>&gt;Document&lt;/<span style="color:#f92672">title</span>&gt;
&lt;/<span style="color:#f92672">head</span>&gt;
&lt;<span style="color:#f92672">body</span>&gt;
    &lt;<span style="color:#f92672">div</span>&gt;
        &lt;<span style="color:#f92672">p</span>&gt;&lt;/<span style="color:#f92672">p</span>&gt;
    &lt;/<span style="color:#f92672">div</span>&gt;
    &lt;<span style="color:#f92672">script</span>&gt;
        <span style="color:#75715e">//输出浏览器名字,可能会输出错误的浏览器名字！
</span><span style="color:#75715e"></span>        document.<span style="color:#a6e22e">write</span>(<span style="color:#a6e22e">navigator</span>.<span style="color:#a6e22e">appCodeName</span>);
    &lt;/<span style="color:#f92672">script</span>&gt;
&lt;/<span style="color:#f92672">body</span>&gt;
&lt;/<span style="color:#f92672">html</span>&gt;
</code></pre></div>
</div>


    </main>

    
      
    
  </body>
</html>
